<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css" />
    <style>
     
    </style>
  </head>
  <body>


    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>

      const width = 800 ;
      const height = 600 ;
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px solid #ccc");


        const data = {
        name:'a',
        cs:[
          {
            name:'b',
            cs:[
              {name:'b1'},
              {name:'b2'},
              {name:'b3'}
            ]
          },
          {
            name:'c',
            cs:[
              {name:'c1'},
              {name:'c2'}
            ]
          },
        ]
      }
      // const data = [
      //   {name:'a',parent:''},
      //   {name:'b',parent:'a'},
      //   {name:'c',parent:'a'},
      //   {name:'b1',parent:'b'},
      //   {name:'b2',parent:'b'},
      //   {name:'c1',parent:'c'},
      //   {name:'c2',parent:'c'},
      // ]

      const root = d3.hierarchy(data,d=>d.cs);
      // const s = d3.stratify()
      //   .id(d=>d.name)
      //   .parentId(d=>d.parent)
      // const root = s(data);

      root.sum(function(d){
         return d.cs ? 0 : 2
      })

      //root.sort((a,b)=>a.value-b.value)
    </script>
  </body>
</html>
